<!DOCTYPE html>
<html>
<head>
	<title>clock</title>
	<style type="text/css">
	body{
		background: #ff0;

	}
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#clock{
		background: #333;
		width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
	}
	#pointer #circle{
		width: 20px;
height: 20px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
	}
	#line-min li,#line-hour li{
		
		background: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform-origin: left center;

	}
	#line-min li{
		width: 10px;
		height: 2px;
	}
	#line-hour li{
		width: 30px;
		height: 2px;
	}
	#number{
		width: 250px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 30px;
	}
	#number li{
		position: absolute;
		/*transform-origin: left center;*/
-webkit-transform: translate(-50%, -50%);
	}

	#pointer li{
		background: #fff;
		position: absolute;
		top: 50%;
		left:50%;
		transform-origin: left center;
	}
#pointer li#hour{
	width: 60px;
	height: 3px;
}#pointer li#min{
	width: 80px;
	height: 2px;
}#pointer li#sec{
	width: 100px;
	height: 1px;
}


	</style>
</head>
<body>
<div id="clock">
	<ul id="line-min"></ul>
	<ul id="line-hour"></ul>
	<ul id="number"></ul>
	<ul id="pointer">
		<li id="hour"></li>
		<li id="min"></li>
		<li id="sec"></li>
		<li id="circle"></li>
	</ul>

</div>
<script type="text/javascript">
	function id(a) {
		return document.getElementById(a);
	}
	(function () {
		var hh = "";
		for(var i =0;i<60;i++)
			hh+=`<li style='transform: rotate(${i*6}deg) translate(135px, 0) ;'></li>`;
		id('line-min').innerHTML = hh;
		hh = "";
		for(var i =0 ;i<12;i++)
			hh += `<li style='transform: rotate(${i*30}deg) translate(120px, 0) ;'></li>`;
		id('line-hour').innerHTML = hh;
		hh = "";
		var r=250/2,x=r,y=r;
		for(var i =1 ;i<=12;i++){
			var angl = (i-3)/6*Math.PI;
			console.log(Math.round(Math.cos(i/6*Math.PI)*100));
			hh+=`<li style="left:${r+r*Math.cos(angl)}px;top:${r+r*Math.sin(angl)}px;">
			${i}</li>`;
		}
			// hh += `<li style='transform: rotate(${i*30}deg) translate(110px, 0) ;'><span>${i}</span></li>`;
			
		id('number').innerHTML = hh;
	})();

	(function () {
		var ids = "sec,min,hour";
		var getData = ()=>{
			var date = new Date();
			var tt =  [
			date.getSeconds()*6-90,
			date.getMinutes()*6-90,
			date.getHours()*30-90
			];
			tt[1]+=tt[0]*0.1;
			tt[2]+=tt[1]*0.5;
			return tt;
		}
		id('sec').style="background:red;"
		setInterval(function () {
			var ds = getData();
			ids.split(',').forEach((item,index)=>{
				// console.log(id(item).style)
				id(item).style.transform=`rotate(${ds[index]}deg)`;
			})
		}, 1000);
	})();
</script>
</body>
</html>